SVG ScreenshotでPortalsを試した
2019/5/29 時点のメモです daiiz.icon
何ができるのか全くわからないがtwitterでデモはよく見かけたので気になっていた
$ open -a "Google Chrome Canary" --args --enable-features=Portals
さらに chrome://flags/#enable-portals を有効化する
基本的な手順
code:js
const portal = document.createElement('portal')
portal.activate()
SVG画像内リンク (外部サイト) への遷移に使う?
用途としてなんか違う気がする daiiz.icon
https://gyazo.com/16c4632703faeb7162e68ce1a528f2cc
遷移先がsame originでなくてもいいのはおもしろい
Portal内でpreloadしただけで、一回アクセスがあったとみなされる
SVG内のScrapboxページをプレビューしただけで、last visited順に影響が出た
左下から画面全体広がるアニメーションは独自にCSSで書いたもの
portal要素のサイズも位置も自由に表現できる
一覧から個別画面 (自サイト内) への遷移に使うのが一番しっくりくる
mouseenterのタイミングでportalを生成して、aタグかportalタグをクリックされたらactivate
https://gyazo.com/e1f28a96d4d213bc5713dca80d802cb7
Poratalから戻った時にscroll位置も保持されているかも?
いまはbrowser backできないbugがあるので試せないが
翌日
良い資料が公開されていた
adoptPredecessorをまだ知らない daiiz.icon
続き